<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script src="../bower_components/babel/browser.js"></script>
    <!--<script src="../node_modules/react/umd/react.development.js"></script>-->
    <!--<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>-->
    <script src="../bower_components/react/react.development.js"></script>
    <script src="../bower_components/react/react-dom.development.js"></script>
    <script src="../node_modules/prop-types/prop-types.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">

        class AlertMessage extends React.Component{
            constructor(props){
                super(props);
                var text = this.props.message;
                this.state = ({
                    alertMessage: text
                })
            }
            componentWillReceiveProps(){
                var message = this.props.message;
                // alert("a: "+message);
                this.setState({
                    alertMessage: message
                })
            }
            render(){
                return (
                    <div>弹出框消息：{this.state.alertMessage}</div>
                );
            }
        };
        // 设置传值检验
        AlertMessage.propTypes = {
            message: PropTypes.string.isRequired
        };
        // 设置默认值
        AlertMessage.defaultProps = {
            message: "默认消息"
        };
        class ParentDiv extends React.Component{
            constructor(){
                super();
                this.state = {
                    messageText: "空白信息"
                }
            }
            _handleClickEvent(e){
                // var text = e.target.innerText;
                var text = document.getElementById("textarea").value;
                // alert(text);
                this.setState({
                    messageText: text
                });
            }
           render(){
               return (
                   <div>
                       <textarea id="textarea"></textarea>
                       <button onClick={this._handleClickEvent.bind(this)}>{this.state.messageText}</button>
                       <AlertMessage message={this.state.messageText}/>
                   </div>
               );
           }
        };

        var selectDom = ReactDOM.render(
            <ParentDiv/>,
            // exampleDom,
            document.getElementById('app')
        );
    </script>
</body>
</html>